{% extends "dash/base.html" %}
{% block content %}
<div id='chart6'>
		      </div> 
<div id='table6'></div>
                   <button type="button" id='but6'>Details</button>
<script>
 $('#initial').hide();
 $('#timedisp').hide();
 $('#protdisp').hide();
 $('#intraffic').hide();
 $('#outtraffic').hide();
 $('#atck').hide();
 $('#srch').show();
 $('#chart6').show();
 $('#table6').show();

function draw_graph()
       {
           $('#chart6').empty();
           
	 var data1 = [{% for item in slist %}
                                    { "id" : "{{ item.id }}",
                                      "flow_time" : "{{ item.flow_time|date:"d-m-Y H:i:s" }}",
                                      "srcip" : "{{ item.srcip }}",
                                      "srcport" : "{{ item.srcport }}",
                                      "dstip" : "{{ item.dstip }}",
                                      "dstport" : "{{ item.dstport }}",
                                      "bytes" :"{{ item.bytes }}",
                                      "packets" :"{{ item.packets }}",
                                      "flags" :"{{ item.flags }}",
                                      "protocol" :"{{ item.protocol }}", 
                                      "tos" :"{{ item.tos }}",                              
                                    },

                                    {% endfor %}
                                   ];

         
           var margin = {top: 40, right: 40, bottom: 40, left:70},
           width = 1200,
           height = 800;
         
           
            var x = d3.time.scale()
                    .range([0, width]);
            var parseDate = d3.time.format("%d-%m-%Y %H:%M:%S").parse;
            data1.forEach(function(d) {
                                        d.flow_time = parseDate(d.flow_time);
                                        d.bytes = d.bytes;
                                       
                 		       });
            var y = d3.scale.linear()
                   .domain([0, d3.max(data1, function(d) { return d.bytes; })])
                   .range([height - margin.top - margin.bottom, 0]);

            x.domain(d3.extent(data1, function(d) { return d.flow_time; })) .rangeRound([0, width - margin.left - margin.right]);
          
            var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom")
                        .tickFormat(d3.time.format("%d-%m-%Y %H:%M:%S"))
                        .tickSize(0)
                        .tickPadding(8);
            var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient('left')
                        .tickPadding(10);
            var svg = d3.select('#chart6').append('svg')
                      .attr('class', 'chart')
                      .attr('width', width)
                      .attr('height', height)
                      .append('g')
                      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
	    svg.selectAll('.chart')
    	       .data(data1)
    	       .enter().append('rect')
      	       .attr('class', 'bar')
      	       .attr('x', function(d) { return x(d.flow_time); })
      	       .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.bytes)) })
      	       .attr('width', 10)
      	       .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.bytes) });
            svg.append("text")      // text label for the x axis
               .attr("x", width/2 )
               .attr("y",  (height-margin.top) )
               .style("text-anchor", "middle")
               .text("Time");
  	    svg.append('g')
    	       .attr('class', 'x axis')
     	       .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
               .call(xAxis);
            svg.append("text")
               .attr("class", "y label")
               .attr("text-anchor", "middle")
               .attr("y", -20)
               .attr("dy", "1em")
               .attr("transform", "rotate(-90)")
               .text("bytes");
	    svg.append('g')
  	       .attr('class', 'y axis')
  	       .call(yAxis);
            var tablecontents = "";
                tablecontents = "<table>"; 
                tablecontents += "<thead>";
                tablecontents += "<tr>";
                tablecontents += "<th>";
                tablecontents += "index";
                tablecontents += "</th>";
		tablecontents += "<th>";
                tablecontents += "srcip";
                tablecontents += "</th>";
		tablecontents += "<th>";
                tablecontents += "dstip";
                tablecontents += "</th>";
		tablecontents += "<th>";
                tablecontents += "bytes";
                tablecontents += "</th>";
		tablecontents += "<th>";
                tablecontents += "packets";
                tablecontents += "</th>";
		tablecontents += "<th>";
                tablecontents += "protocol";
                tablecontents += "</th>";
		tablecontents += "<th>";
                tablecontents += "flow_time";
                tablecontents += "</th>";
                tablecontents += "</tr>";
                tablecontents += "</thead>";
            for (var i = 0; i < data1.length; i ++)
            {
      		var byt = data1[i].bytes;
                var las = data1[i].flow_time;
                var srcip = data1[i].srcip;
		var dstip = data1[i].dstip;
		var protocol = data1[i].protocol;
		var packets = data1[i].packets;
      		tablecontents += "<tr>";
      		tablecontents += "<td>" + (i+1) + "</td>";
		tablecontents += "<td>" + srcip + "</td>";
		tablecontents += "<td>" + dstip + "</td>";
     	        tablecontents += "<td>" + byt + "</td>";
		tablecontents += "<td>" + packets + "</td>";
		tablecontents += "<td>" + protocol + "</td>";
                tablecontents += "<td>" + las + "</td>";
      		tablecontents += "</tr>";
   	    }
            tablecontents += "</table>";
  	    document.getElementById("table6").innerHTML = tablecontents;
             $("#table6").hide(); 
            $("#but6").click(function() { 
		$("#table6").show();
		});
       
       }
draw_graph();
</script>
{% endblock %}
